@import '/variable.less';

@home-tab-item-height: 96rpx;
@primary-color: #0eb0c9;
@price-color: #111;
@text-color-secondary: #999;

.home-container {
  height: calc(100vh - @tab-bar-height);

  .home-content {
    height: calc(100% - @nav-bar-height);
  }

  .t-tabs {
    --td-tab-item-tag-height: @home-tab-item-height;
    --td-tab-font-size: @font-size-small;
    width: 100%;
    height: 100%;

    &__content {
      height: calc(100% - @home-tab-item-height);
      overflow: auto;
      background-color: @bg-color;
    }
  }
}

/* 分类图标区域 */
.category-icons {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 24rpx 0;
  background-color: #fff;
  
  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120rpx;
    
    .category-icon {
      width: 88rpx;
      height: 88rpx;
      margin-bottom: 12rpx;
    }
    
    .category-name {
      font-size: 24rpx;
      color: #333;
    }
  }
}

/* 广告横幅区域 */
.banner-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24rpx;
  padding: 20rpx 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  
  .banner-content {
    display: flex;
    align-items: center;
    
    .banner-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 12rpx;
    }
    
    .banner-text {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .banner-action {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: @text-color-secondary;
  }
}

/* 商品列表区域 */
.product-list {
  display: flex;
  margin: 0 24rpx 24rpx;
  gap: 24rpx;
  
  .product-item {
    width: 344rpx;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    position: relative;
    
    .product-tag, .product-tag-small {
      position: absolute;
      top: 16rpx;
      left: 16rpx;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      z-index: 1;
    }
    
    .product-tag-small {
      background: rgba(0, 0, 0, 0.5);
    }
    
    .product-hot {
      position: absolute;
      top: 52rpx;
      left: 16rpx;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      z-index: 1;
    }
    
    .product-image {
      width: 100%;
      height: 344rpx;
      object-fit: cover;
    }
    
    .product-title {
      font-size: 28rpx;
      color: #333;
      margin: 16rpx 16rpx 8rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .product-price {
      font-size: 32rpx;
      font-weight: bold;
      color: @price-color;
      margin: 8rpx 16rpx 16rpx;
    }
    
    .product-sold, .product-fans {
      font-size: 24rpx;
      color: @text-color-secondary;
      margin: 0 16rpx 16rpx;
    }
    
    &.small {
      .product-image {
        height: 200rpx;
      }
      
      .product-title, .product-price, .product-sold, .product-fans {
        margin: 8rpx 12rpx;
      }
      
      .product-title {
        font-size: 26rpx;
        -webkit-line-clamp: 1;
      }
      
      .product-price {
        font-size: 28rpx;
      }
    }
  }
  
  .product-column {
    display: flex;
    flex-direction: column;
    width: 344rpx;
    gap: 24rpx;
  }
}

/* 更多商品列表 */
.product-list-full {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding: 0 24rpx 24rpx;
  
  .product-item-full {
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    
    .product-image {
      width: 100%;
      height: 344rpx;
      object-fit: cover;
    }
    
    .product-title {
      font-size: 28rpx;
      color: #333;
      margin: 16rpx 16rpx 8rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .product-price {
      font-size: 32rpx;
      font-weight: bold;
      color: @price-color;
      margin: 8rpx 16rpx 8rpx;
    }
    
    .product-sold {
      font-size: 32rpx;
      color: @text-color-secondary;
      margin: 0 16rpx 16rpx;
      text-align: right;
    }
  }
}

/* 底部导航栏 */
.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: @tab-bar-height;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22rpx;
    color: @text-color-secondary;
    
    &.active {
      color: @primary-color;
    }
  }
}